<template>
  <div class="main-page">
    <el-tabs v-model="type" class="tabs" type="card" @tab-click="handleTab">
      <el-tab-pane label="对私提现" name="0"></el-tab-pane>
      <el-tab-pane label="对公提现" name="1"></el-tab-pane>
    </el-tabs>
    <div class="c-row">
      <div class="c-item">
        <div class="withdrawal-total-container">
          <div class="withdrawal-total">
            当前提现总金额: {{ alignAmount + cardAmount }}元
          </div>
        </div>
        <div class="withdrawal-total-container">
          <div v-if="type === '0'" class="withdrawal-total">
            支付宝: {{ alignAmount }}元
          </div>
        </div>
        <div class="withdrawal-total-container">
          <div v-if="type === '0'" class="withdrawal-total">
            银行卡: {{ cardAmount }}元
          </div>
        </div>
        <div class="withdrawal-total-container">
          <div v-if="type === '1'" class="withdrawal-total">
            对公提现总金额: {{ isPrivateAmount }}
          </div>
        </div>
      </div>
      <el-button v-show="type == '0'" type="primary" size="medium" @click="selectionPay">
        批量打款
      </el-button>
    </div>
    <PageSearch v-show="type == '0'" :search-form-config="searchFormConfig" :form-data.sync="formData" @searchBtnClick="handleSearch" />

    <!-- <el-row v-show="type == '0'" type="flex" justify="end">

    </el-row> -->
    <!-- 将提现总金额显示移到页面左侧靠前位置 -->

    <PageContent v-show="type == '0'" ref="pageContent" :form-data="formData" :content-table-config="contentConfig" @selectionChange="selectionChange">
      <template #status="{ row }">
        <el-tag :type="tagType(row)">
          {{ getStatus(row) }}
        </el-tag>
      </template>
      <template #type="{ row }">
        {{ row.type == 1 ? "对公" : row.type == 0 ? "对私" : "未知" }}
      </template>
      <template #operate="{ row }">
        <el-button v-show="row.state == 0" type="text" size="small" icon="el-icon-money" @click="handlePay(row)">
          打款
        </el-button>
        <el-button v-show="row.state == 0" type="text" size="small" icon="el-icon-money" @click="handleDeduction(row)">
          抵扣
        </el-button>
      </template>
    </PageContent>
    <PageSearch v-show="type == '1'" :search-form-config="searchFormConfig1" :form-data.sync="formData1" @searchBtnClick="handleSearch1" />
    <PageContent v-show="type == '1'" ref="pageContent1" :form-data="formData1" :content-table-config="contentConfig1">
      <template #status="{ row }">
        <el-tag :type="tagType(row)">
          {{ getStatus(row) }}
        </el-tag>
      </template>
      <template #type="{ row }">
        {{ row.type == 1 ? "对公" : row.type == 0 ? "对私" : "未知" }}
      </template>
      <template #invoiceTypeName="{ row }">
        <span>{{ row.invoiceTypeName }}</span>
      </template>
      <template #taxPoint="{ row }">
        <span>{{ row.taxPoint ? row.taxPoint : '0' }}%</span>
      </template>
      <template #operate="{ row }">
        <el-popover placement="left" width="400" trigger="click">
          <p>
            联系手机:{{ row.contactPhone ? row.contactPhone : '-' }}
          </p>
          <p>
            卡号:{{ row.cardNo ? row.cardNo : '-' }}
          </p>
          <p>
            开户行:{{ row.bankName ? row.bankName : '-' }}
          </p>
          <p>
            支行:{{ row.bankSubName ? row.bankSubName : '-' }}
          </p>
          <p>
            公司名称:{{ row.companyName ? row.companyName : '-' }}
          </p>
          <p>
            发票类型:{{ row.invoiceTypeName ? row.invoiceTypeName : '-' }}
          </p>
          <p>
            税点:{{ row.taxPoint ? row.taxPoint : '0' }}%
          </p>
          <el-button slot="reference" type="text" size="small">
            打款信息
          </el-button>
        </el-popover>
        <el-button v-show="row.type==1 && row.state==0" type="text" size="small" icon="el-icon-money" @click="handlePay1(row)">
          打款确认
        </el-button>
      </template>
    </PageContent>
  </div>
</template>

<script>
import { contentConfig } from "./config/content.config";
import { searchFormConfig } from "./config/search.config";
import { contentConfig1 } from "./config/content.config";
import { searchFormConfig1 } from "./config/search.config";
import { makeSure, confirmPayment, deduction, withdrawalAmount } from "@/api/withdrawal";


export default {
  name: "ApplicationList",
  data() {
    return {
      contentConfig,
      contentConfig1,
      searchFormConfig,
      searchFormConfig1,
      formData: {
      }, // 搜索表单数据
      formData1: {
      }, // 搜索表单数据
      type: '0',
      selectionList: [],
      alignAmount: 0, // 对私提现总金额
      cardAmount: 0, // 对公提现总金额
      isPrivateAmount: 0, // 对公提现总金额
    };
  },
  computed: {
    tagType() {
      return (row) => {
        switch (+row.state) {
          case -1:
            return "danger";
          case 0:
            return "warn";
          case 3:
            return "primary";
          case 1:
            return "success";
          default:
            return "info";
        }
      };
    },
    getStatus() {
      return (row) => {
        switch (+row.state) {
          case -1:
            return "提现失败";
          case 0:
            return "提现中";
          case 1:
            return "提现成功";
          case 2:
            return "正在打款";
          default:
            return "抵扣";
        }
      };
    }
  },
  async created() {
    try {
      // 获取对私提现总金额
      const privateRes = await withdrawalAmount();
      this.alignAmount = privateRes.data.alignAmount;
      this.cardAmount = privateRes.data.cardAmount;
      this.isPrivateAmount = privateRes.data.isPrivateAmount;

    } catch (error) {
      console.error('获取提现总金额失败', error);
    }
  },
  methods: {
    handleSearch() {
      this.$refs.pageContent.queryTblMain();
    },
    handleSearch1() {
      this.$refs.pageContent1.queryTblMain();
    },
    handleTab(tab) {
      this.type = tab.name
    },
    handlePay(row) {
      let { id } = row;
      console.log(id);
      this.$confirm("确定打款前请仔细核对信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          confirmPayment({ ids: [row.id] }).then((res) => {
            this.$message.success(res.message);
            this.$refs.pageContent.queryTblMain();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消确认",
          });
        });
    },
    handleDeduction(row) {
      let { id } = row;
      this.$confirm("确定抵扣前请仔细核对信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deduction({ id }).then((res) => {
            this.$message.success(res.message);
            this.$refs.pageContent.queryTblMain();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消确认",
          });
        });
    },
    handlePay1(row) {
      let id = row.id;
      this.$confirm("确定打款前请仔细核对信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          makeSure({ id }).then(() => {
            this.$message.success(`确认打款成功！`);
            this.$refs.pageContent.queryTblMain();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消确认",
          });
        });
    },
    selectionPay() {
      console.log(this.selectionList);
      if (this.selectionList.length === 0) {
        this.$message.error('请选择数据');
        return
      }
      let arr = [];
      let hasState = false;
      for (let i = 0; i < this.selectionList.length; i++) {
        if (this.selectionList[i].state != 0) {
          hasState = true;
        }
        arr.push(this.selectionList[i].id);
      }
      if (hasState) {
        this.$message.error('订单状态错误,不能进行此操作');
        return
      }
      this.$confirm("确定打款前请仔细核对信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          confirmPayment({ ids: arr }).then((res) => {
            this.$message.success(res.message);
            this.$refs.pageContent.queryTblMain();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消确认",
          });
        });
    },
    selectionChange(selection) {
      this.selectionList = selection;
    },
  },
};
</script>
<style lang="scss" scoped>
.tabs {
  padding-top: 20px;
}
.content-table {
  height: calc(100% - 76px);
}
.c-row {
  display: flex;
  justify-content: space-between;
}
.c-item {
  display: flex;
  align-content: center;
  padding-left: 32px;
}
.withdrawal-total-container {
  text-align: left;
}
.withdrawal-total {
  color: red;
  padding: 0 10px;
}
</style>
